<template>
  <div class="my-plans-container">
    <div class="page-header">
      <h2>我的方案</h2>
      <div class="header-actions">
        <el-button type="primary" @click="$router.push('/tactical-plan/create')">
          <el-icon><Plus /></el-icon>创建新方案
        </el-button>
        <el-button @click="importPlan">
          <el-icon><Upload /></el-icon>导入方案
        </el-button>
      </div>
    </div>

    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalPlans }}</div>
              <div class="stat-label">方案总数</div>
            </div>
            <el-icon class="stat-icon"><Document /></el-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-value">{{ statistics.recentCreated }}</div>
              <div class="stat-label">本月新增</div>
            </div>
            <el-icon class="stat-icon"><Calendar /></el-icon>
          </div>
        </el-card>
      </el-col>
      <el-col :xs="24" :sm="8">
        <el-card shadow="hover" class="stat-card">
          <div class="stat-content">
            <div class="stat-info">
              <div class="stat-value">{{ statistics.totalExecutions }}</div>
              <div class="stat-label">执行次数</div>
            </div>
            <el-icon class="stat-icon"><VideoPlay /></el-icon>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 分类选项卡 -->
    <el-tabs v-model="activeTab" class="plan-tabs">
      <el-tab-pane label="全部方案" name="all">
        <plan-table :plans="getFilteredPlans('all')" />
      </el-tab-pane>
      <el-tab-pane label="我创建的" name="created">
        <plan-table :plans="getFilteredPlans('created')" />
      </el-tab-pane>
      <el-tab-pane label="收藏的" name="favorite">
        <plan-table :plans="getFilteredPlans('favorite')" />
      </el-tab-pane>
      <el-tab-pane label="已归档" name="archived">
        <plan-table :plans="getFilteredPlans('archived')" />
      </el-tab-pane>
    </el-tabs>

    <!-- 导入方案对话框 -->
    <el-dialog v-model="importDialogVisible" title="导入方案" width="500px">
      <el-upload
        class="plan-upload"
        drag
        action="#"
        :auto-upload="false"
        :limit="1"
        accept=".json,.zip"
      >
        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
        <div class="el-upload__text">拖拽文件到此处或 <em>点击上传</em></div>
        <template #tip>
          <div class="el-upload__tip">支持 .json 或 .zip 格式的方案文件</div>
        </template>
      </el-upload>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="importDialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleImportPlan">导入</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup>
/**
 * 我的方案页面
 * @file my-plans.vue
 */
import { ref } from 'vue'
import { ElMessage } from 'element-plus'
import PlanTable from '@/components/PlanTable/index.vue'

// 统计数据
const statistics = ref({
  totalPlans: 8,
  recentCreated: 3,
  totalExecutions: 28
})

// 当前选中的选项卡
const activeTab = ref('all')

// 导入对话框可见性
const importDialogVisible = ref(false)

// 模拟我的方案数据
const myPlans = ref([
  {
    id: 1,
    name: '工业控制系统CAN总线监听方案',
    type: '单兵作战',
    scenario: '工业自动化',
    busType: 'CAN',
    attackTechniques: ['链路嗅探', '数据重放'],
    description: '本方案针对工业控制系统中的CAN总线通信进行监听，获取总线上传输的数据，用于后续的数据分析和漏洞挖掘。',
    createTime: '2024-04-01 10:20:30',
    lastExecuteTime: '2024-04-02 15:30:22',
    executeCount: 5,
    isFavorite: true,
    isArchived: false,
    isCreatedByMe: true
  },
  {
    id: 2,
    name: '无人机固件漏洞利用方案',
    type: '系统协同',
    scenario: '无人机场景',
    busType: 'USB',
    attackTechniques: ['固件投毒', '后门植入'],
    description: '针对特定无人机型号的固件进行漏洞挖掘和利用，实现对无人机控制系统的入侵。',
    createTime: '2024-03-28 15:30:22',
    lastExecuteTime: '2024-04-01 09:15:36',
    executeCount: 8,
    isFavorite: true,
    isArchived: false,
    isCreatedByMe: true
  },
  {
    id: 3,
    name: '航电系统1553B总线攻击方案',
    type: '攻防对抗',
    scenario: '航电场景',
    busType: '1553B',
    attackTechniques: ['数据重放', '消息劫持'],
    description: '针对航空电子系统中的1553B总线通信进行攻击测试，通过数据重放和消息劫持实现对系统的控制。',
    createTime: '2024-03-25 09:15:48',
    lastExecuteTime: '2024-03-30 11:20:15',
    executeCount: 6,
    isFavorite: false,
    isArchived: false,
    isCreatedByMe: true
  },
  {
    id: 4,
    name: 'Modbus协议DoS攻击方案',
    type: '单兵作战',
    scenario: '工业自动化',
    busType: 'Modbus',
    attackTechniques: ['DoS', '泛洪'],
    description: '针对使用Modbus协议的工业控制系统，实施DoS攻击，使系统通信中断或延迟，影响正常运行。',
    createTime: '2024-03-20 16:40:10',
    lastExecuteTime: '2024-03-28 14:25:30',
    executeCount: 3,
    isFavorite: false,
    isArchived: false,
    isCreatedByMe: true
  },
  {
    id: 5,
    name: 'RS485总线消息劫持方案',
    type: '单兵作战',
    scenario: '工业自动化',
    busType: 'RS485',
    attackTechniques: ['消息劫持', '数据重放'],
    description: '针对使用RS485总线的工业控制系统，实施消息劫持攻击，修改或伪造控制指令。',
    createTime: '2024-03-18 11:25:36',
    lastExecuteTime: '2024-03-25 16:40:10',
    executeCount: 4,
    isFavorite: true,
    isArchived: false,
    isCreatedByMe: false
  },
  {
    id: 6,
    name: 'ARINC429总线数据分析方案',
    type: '单兵作战',
    scenario: '航电场景',
    busType: 'ARINC429',
    attackTechniques: ['链路嗅探', '数据分析'],
    description: '针对使用ARINC429总线的航电系统，进行数据监听和分析，识别通信模式和关键指令。',
    createTime: '2024-03-15 10:20:30',
    lastExecuteTime: null,
    executeCount: 0,
    isFavorite: false,
    isArchived: true,
    isCreatedByMe: true
  },
  {
    id: 7,
    name: 'USB设备固件逆向分析方案',
    type: '单兵作战',
    scenario: '工业自动化',
    busType: 'USB',
    attackTechniques: ['逆向破解', '固件投毒'],
    description: '对USB控制设备的固件进行逆向分析，寻找漏洞并植入恶意代码。',
    createTime: '2024-03-10 14:30:22',
    lastExecuteTime: '2024-03-20 09:15:36',
    executeCount: 2,
    isFavorite: false,
    isArchived: true,
    isCreatedByMe: false
  },
  {
    id: 8,
    name: 'RS232串口通信嗅探方案',
    type: '单兵作战',
    scenario: '工业自动化',
    busType: 'RS232',
    attackTechniques: ['链路嗅探', '数据分析'],
    description: '针对使用RS232串口通信的工业设备，进行数据嗅探和分析，获取通信内容和控制指令。',
    createTime: '2024-03-05 16:40:10',
    lastExecuteTime: null,
    executeCount: 0,
    isFavorite: false,
    isArchived: false,
    isCreatedByMe: true
  }
])

// 根据选项卡过滤方案
const getFilteredPlans = (tabType) => {
  if (tabType === 'all') {
    return myPlans.value.filter(p => !p.isArchived)
  } else if (tabType === 'created') {
    return myPlans.value.filter(p => p.isCreatedByMe && !p.isArchived)
  } else if (tabType === 'favorite') {
    return myPlans.value.filter(p => p.isFavorite && !p.isArchived)
  } else if (tabType === 'archived') {
    return myPlans.value.filter(p => p.isArchived)
  }
  return []
}

// 导入方案
const importPlan = () => {
  importDialogVisible.value = true
}

// 处理导入方案
const handleImportPlan = () => {
  ElMessage.success('方案导入成功')
  importDialogVisible.value = false
}
</script>

<style lang="scss" scoped>
.my-plans-container {
  padding: 20px;

    h2 {
      margin: 0;
      color: #1f2f3d;
      font-weight: 500;
    }

    .header-actions {
      display: flex;
      gap: 10px;
    }
  

  .stats-row {
    margin-bottom: 24px;

    .stat-card {
      cursor: pointer;
      transition: all 0.3s;
      border-radius: 8px;
      // border: none;
      background: var(--stat-card-bg);
      border: var(--stat-card-border);

      &:hover {
        transform: translateY(-5px);
        box-shadow: 0 6px 16px rgba(64, 158, 255, 0.1);
      }

      .stat-content {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 6px;

        .stat-info {
          .stat-value {
            font-size: 28px;
            font-weight: bold;
            color: var(--header-text-color);// #1f2f3d;
            margin-bottom: 5px;
          }

          .stat-label {
            font-size: 14px;
            color: var(--text-color-secondary);// #5e6d82;
          }
        }

        .stat-icon {
          font-size: 48px;
          color: #409EFF;
          opacity: 0.8;
        }
      }

      &:nth-child(1) {
        .stat-icon {
          color: #409EFF;
        }
        background: linear-gradient(135deg, var(--bg-color-secondary) 0%, var(--card-bg), 100%);
      }

      &:nth-child(2) {
        .stat-icon {
          color: #67C23A;
        }
        background: linear-gradient(135deg, rgba(240, 255, 240, 0.8) 0%, rgba(236, 255, 236, 0.4) 100%);
      }

      &:nth-child(3) {
        .stat-icon {
          color: #E6A23C;
        }
        background: linear-gradient(135deg, rgba(255, 249, 240, 0.8) 0%, rgba(255, 244, 230, 0.4) 100%);
      }
    }
  }

  .plan-tabs {
    margin-top: 20px;

    :deep(.el-tabs__item) {
      color: #5e6d82;
      font-size: 15px;
      
      &.is-active {
        color: #409EFF;
        font-weight: 500;
      }
    }
  }
  
  :deep(.el-dialog) {
    border-radius: 8px;
    
    .el-dialog__header {
      background-color: #f5f7fa;
      margin: 0;
      padding: 16px 20px;
      border-bottom: 1px solid #e4e7ed;
      
      .el-dialog__title {
        color: #1f2f3d;
        font-weight: 500;
      }
    }
    
    .el-dialog__body {
      padding: 24px;
    }
    
    .el-dialog__footer {
      padding: 16px 20px;
      border-top: 1px solid #e4e7ed;
    }
    
    .plan-upload {
      .el-upload-dragger {
        background-color: #f9fafc;
        border: 1px dashed #d9ecff;
        border-radius: 8px;
        
        &:hover {
          background-color: #f0f9ff;
          border-color: #409EFF;
        }
        
        .el-icon--upload {
          color: #409EFF;
        }
      }
      
      .el-upload__text {
        color: #5e6d82;
        
        em {
          color: #409EFF;
          font-style: normal;
        }
      }
      
      .el-upload__tip {
        color: #909399;
        font-size: 13px;
      }
    }
  }
}
</style> 